<template>
	<rh-wx class="my-detail-write-off-container">
		<template>
			<view class="model-item">
				<view class="model-label">
					<text class="label-txt">订单详情</text>
				</view>
				<view class="info-list">
					<view class="info-item flex-normal">
						<view class="info-label">订单类型：</view>
						<view class="info-val">{{baseData.orderType}}</view>
					</view>
					<view class="info-item flex-normal">
						<view class="info-label">活动编号：</view>
						<view class="info-val">{{baseData.activityCode}}</view>
					</view>
					<view class="info-item flex-normal">
						<view class="info-label">订单时间：</view>
						<view class="info-val">{{baseData.orderTime}}</view>
					</view>
					<view class="info-item flex-normal">
						<view class="info-label">支付金额：</view>
						<view class="info-val">{{baseData.orderPrice}} 元</view>
					</view>
					<view class="info-item flex-normal">
						<view class="info-label">退款金额：</view>
						<view class="info-val">{{baseData.refundPrice}} 元</view>
					</view>
				</view>
			</view>
			<view class="model-item">
				<view class="model-label" v-if="serveList.length">
					<text class="label-txt">商品详情</text>
				</view>
				<view class="card-list">
					<view class="card-item flex-normal" v-for="item in serveList" :key="item.id" 
						@click="jumpDatail(item)">
						<image class="card-icon" :src="item.coverUrl" mode="aspectFill"></image>
						<view class="card-main flex-column">
							<text class="card-label">{{item.activityName}}</text>
							<text class="card-status error">{{item.statusName}}</text>
							<text class="card-time" v-if="item.status == '5'">
								核销日期：{{item.verificationTime}}
							</text>
							<text class="card-time" v-else>
								截止日期：{{item.endTime}}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="desc-content">
				<view class="desc-label">退款须知</view>
				<view class="desc-list">
					<view class="item" v-for="(desc, index) in descList" :key="index">
						{{index + 1}}、{{desc}}
					</view>
				</view>
			</view>
			<rh-submit-btn text="立即退款" :submit-action="submit"></rh-submit-btn>
			<u-modal :show="boo.showModal" 
			:closeOnClickOverlay="true"
			title="退款提示" 
			@close="boo.showModal = false"
			@confirm="boo.showModal = false"
			content='由于部分产品已使用，或券码已激活，您的订单无法退款；请及时使用，以免过期失效。'></u-modal>
		</template>
	</rh-wx>
</template>

<script>
	import {isWechat} from '@/script/wx-premission.js'
	import {refundOrderInfo, cardRefund} from '@/api/card/index.js'
	export default {
		data() {
			return {
				isWechat: isWechat(),
				boo: {
					showModal: false
				},
				id: '',
				baseData: {},
				serveList: [],
				descList: [
					'退款后，资金返回原支付账户；',
					'如提现长时间未到账，可联系商家反馈；',
					'如果活动中部分商品已使用，或已激活，则不支持退款；'
				]
			}
		},
		onLoad(e){
			if(!this.isWechat) return
			let {id = ''} = e, _self = this
			if(!id || id == '') return
			_self.id = id
			_self.showWxApp().then(boo => {
				_self.queryCardDetail()
			})
		},
		methods: {
			queryCardDetail(){
				let _self = this
				if(!_self.id) return
				refundOrderInfo(_self.id).then(res => {
					const { cards } = res.data
					_self.baseData = res.data
					_self.serveList = cards || []
				})
			},
			submit(val){
				let _self = this
				return new Promise((resolve, reject) => {
					const { refundStatus, orderNumber } = _self.baseData
					if(!refundStatus){
						_self.boo.showModal = true
						resolve(true)
					}else{
						uni.showLoading(
							{title: '退款中',mask: true}
						)
						cardRefund(orderNumber).then(res => {
							_self.$attention.noIcon('退款申请成功，请关注退款信息')
							_self.queryCardDetail()
						}).finally(() => {
							uni.hideLoading();
							resolve(true)
						})
					}
				})
			},
		}

	} 
</script>
<style lang="scss" scoped>
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.my-detail-write-off-container{
		min-height: 100vh;
		background-color: #F4F8F9;
		padding: 0 20rpx 160rpx;
		.card-list{
		  margin-bottom: 20rpx;
		  .card-item{
		    margin-top: 30rpx;
		    background-color: #fff;
		    border-radius: 20rpx;
		    padding: 26rpx 20rpx;
		    .card-icon{
		      width: 228rpx;
		      height: 144rpx;
		      overflow: hidden;
		      border-radius: 12rpx;
		      background-color: #F4F8F9;
		    }
		    .card-main{
		      flex: 1;
		      margin-left: 30rpx;
		      .card-label{
		        @include fontStyle(#3E3E3E, 32rpx);
		      }
		      .card-desc{
		        margin-top: 15rpx;
		        @include fontStyle(#000000, 24rpx);
		      }
					.card-status{
						margin-top: 15rpx;
						@include fontStyle(#3D3D3D, 24rpx);
						&.error{
							color: #D10909;
						}
					}
		      .card-time{
		        margin-top: 15rpx;
		        @include fontStyle(#7F7F7F, 24rpx);
		      }
		    }
		  }
		}
		.info-list{
			.info-item{
				margin-bottom: 12rpx;
				.info-label{
					@include fontStyle(#3D3D3D, 28rpx);
				}
				.info-val{
					@include fontStyle(#3D3D3D, 28rpx);
				}
			}
		}
		.model-item{
			margin-bottom: 20rpx;
			.model-label{
				padding: 20rpx 0;
				.label-txt{
					@include fontStyle(#3D3D3D, 32rpx);
				}
			}
		}
		.desc-content{
			margin-top: 30rpx;
			padding: 0 20rpx 40rpx;
			.desc-label{
				@include fontStyle(#3D3D3D, 32rpx);
			}
			.desc-list{
				margin-top: 32rpx;
				.item{
					margin-bottom: 10rpx;
					text-align: justify;
					@include fontStyle(#3D3D3D, 28rpx);
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>


